<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入CodeMirror核心文件 -->
    <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
    <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
    <link rel="stylesheet" type="text/css" href="codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" type="text/css" href="codemirror/addon/lint/lint.css">


    <!-- CodeMirror支持不同语言，根据需要引入JS文件 -->
    <!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
    <script type="text/javascript" src="codemirror/mode/python/python.js"></script>

    <!-- 下面分别为显示行数、括号匹配和全屏插件 -->
    <script type="text/javascript" src="codemirror/addon/selection/active-line.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
    <script type="text/javascript" src="codemirror/addon/display/fullscreen.js"></script>
    <script type="text/javascript" src="codemirror/addon/hint/show-hint.js"></script>
    <script type="text/javascript" src="codemirror/addon/lint/lint.js"></script>

    <!--vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0
        }

        .wrap {
            width: 100%;
            height: 100%;
        }

        .header {
            width: 100%;
            height: 60px;
            background: #ef993e;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .content {
            margin-top: 40px;
            display: flex;
            justify-content: space-around;
            padding: 0 20px;
        }

        .input {
            width: 650px;
            height: 500px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }

        .input_title {
            width: 650px;
            height: 60px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            box-sizing: border-box;
        }

        input[type='button'], [type='submit'] {
            border: 1px solid #ddd;
            outline: none;
            width: 85px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: #333333;
            border-radius: 5px;
            background: #fff;
        }

        .input_area {
            width: 650px;
            height: calc(500px - 60px);
            box-sizing: border-box;
        }

        textarea {
            width: 650px;
            height: calc(500px - 60px);
            border: none;
            outline: none;
            resize: none;
        }


        iframe {
            width: 650px;
            height: calc(500px - 60px);
            border: none;
            outline: none;
        }


    </style>


</head>
<body>
<div id="app" class="wrap">
    <div class="header">
        <h1>Tensorflow实战</h1>
    </div>
    <div class="content">

        <form id="input" action="http://127.0.0.1:5001/submit" method="post" class="input">
            <div class="input_title">
                <input type="button" value="源代码">
                <input type="submit" value="运行" id="run" @click="submit_code">
            </div>
            <div class="input_area">
                <textarea v-model="code_input" id="code" name="code" >import os</textarea>
            </div>
        </form>

        <div id="output" class="input">
            <div class="input_title">
                <input type="button" value="运行结果">
            </div>
            <div class="input_area" id="result">
            {{info}}
            </div>
        </div>

    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            code_input: '',
            info:''
        },
        methods: {
            submit_code: function () {
                axios
                    .post('127.0.0.1.:5001',{
                        code:this.code_input
                    })
                    .then(response => {
                        this.info = response.data
                    })
                    .catch(error => {
                        console.log(error)
                        this.errored = true
                    })
                    .finally(() => this.loading = false)
            }
        }


    })


    var editor = CodeMirror.fromTextArea(document.getElementById("code"),
        {
            mode: "python",     //
            lineNumbers: true,     // 显示行数
            indentUnit: 4,         // 缩进单位为4
            matchBrackets: true,   // 括号匹配
            lineWrapping: true,   // 自动换行
            lint: true,
            hint: true  //代码提示
        });


    // var Run = document.querySelector("#run");

    // var Result = document.querySelector("#result");
    //
    // Run.onclick = function () {
    //
    //
    //     console.log(233);
    //     Result.innerHTML = "";
    //     var htmlCode = editor.getValue();
    //     // 1. 创建<iframe>元素
    //     var iframe = document.createElement('iframe');
    //     // 2. 将CSS，HTML字符串转换为Blob对象
    //     var blob = new Blob([htmlCode], {
    //         'type': 'text/html'
    //     });
    //     // 3. 使用URL.createObjectURL()方法将...
    //     iframe.src = URL.createObjectURL(blob);
    //
    //     Result.appendChild(iframe)
    // }

</script>

</body>
</html>
